<template>
	<view class="page">
		<view class="info">
			<image :src="detail.shop_images[0]" mode=""></image>
			<view class="box">
				<view class="name">
					{{detail.shop_name}}
				</view>
				<view class="address">
					{{detail.shop_address}}
				</view>
			</view>
		</view>
		<view class="fun">
			<view class="item" @click="openMap">
				<image src="../../static/shopDetail_01.png" mode=""></image>导航去这里
			</view>
			<view class="item" @click="callPhone">
				<image src="../../static/detail_03.png" mode=""></image>商家电话
			</view>
		</view>
		<view class="detail">
			<view class="title">
				订单核销码
			</view>
			<view class="code">
				<image :src="codeSrc" mode=""></image>
				<view class="mask" v-if="detail.state == 1">
					<image src="../../static/detail_01.png" mode=""></image>
					<text>订单已完成</text>
				</view>
			</view>
			<view class="box">
				<view class="item"><text>订单编号：</text>{{detail.no}}</view>
				<view class="item"><text>订单时间：</text>{{detail.createtime | formatDate}}</view>
				<view class="item" v-if="detail.appointmenttime"><text>预约时间：</text>{{detail.appointmenttime.substr(0,16)}}</view>
				<view class="item" v-if="detail.completetime"><text>完成时间：</text>{{detail.completetime | formatDate}}</view>
				<view class="item"><text>用户名称：</text>{{detail.user_name}}</view>
				<view class="item"><text>联系电话：</text>{{detail.user_mobile}}</view>
				<view class="item"><text>优惠券：</text>{{detail.coupon_text}}</view>
			</view>
		</view>
		<view class="btn" @click="cancel">取消预约</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail:{},
				appointmentId:"",
				codeSrc:"",
				$enviorment:""
			}
		},
		filters: {
			formatDate: function(value) {
				var date = new Date(value*1000);
				//date.setTime(value);
				var month = date.getMonth() + 1;
				if (month < 10)
					month = "0" + month;
				var day = date.getDate();
				if (day < 10)
					day = "0" + day;
				var hours = date.getHours();
				if (hours < 10)
					hours = "0" + hours;
				var minutes = date.getMinutes();
				if (minutes < 10)
					minutes = "0" + minutes;
				var time = date.getFullYear() + "-" + month + "-" + day +
					" " + hours + ":" + minutes;
				return time;
			}
		
		},
		methods: {
			cancel(){
				uni.showModal({
				    title: '提示',
				    content: '确认取消该预约吗？',
				    success: (res)=> {
				        if (res.confirm) {
				            this.$get('appointment/cancel', {id:this.detail.id}, (res) => {
				            	uni.showToast({title:"取消成功！",})
								uni.navigateBack({
								  success: () => {
								    let page = getCurrentPages().pop();
								    if (page) {
								       page.onLoad(page.options);//执行上个页面的方法
								    };
								  }
								})
				            })
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			openMap() {
				uni.openLocation({
					latitude: Number(this.detail.shop_lat), //要去的纬度-地址       
					longitude: Number(this.detail.shop_lng), //要去的经度-地址
					name: this.detail.shop_name, //地址名称
					address: this.detail.shop_address, //详细地址名称
					success: function() {
						console.log('导航成功');
					},
					fail: function(error) {
						console.log(error)
					}
				});
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.detail.shop_tel //仅为示例
				});
			},
			back() {
				uni.navigateBack();
			},
			getDetail(){
				this.$get('appointment/info', {
					id: this.appointmentId,
				}, (res) => {
					this.detail = res
					this.getCode()
				})
			},
			getCode(){
				this.$getS('appointment/showqrcord', {
					verification_code: this.detail.verification_code,
				}, (res) => {
					this.codeSrc = res
				})
			}
		},
		onLoad(options) {
			this.appointmentId = options.appointmentId
			this.getDetail()
		},
	}
</script>

<style>
	.info{
		background-color: #FFFFFF;
		border-bottom: 1px solid #E5E5E5;
		padding: 30rpx 26rpx;
	}
	.info>image{
		width: 148rpx;
		height: 148rpx;
		border-radius: 14rpx;
	}
	.info .box{
		position: relative;
		width: calc(100% - 150rpx);
		float: right;
		padding-left: 20rpx;
	}
	.info .box .name{
		font-size: 34rpx;
		color: #111111;
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
		display: -webkit-box;
		margin-top: 10rpx;
	}
	.info .box .address{
		font-size: 26rpx;
		color: #666666;
		line-height: 26rpx;
		margin-top: 15rpx;
	}
	.fun{
		padding: 26rpx 0;
		display: flex;
		background-color: #FFFFFF;
	}
	.fun .item{
		flex: 1;
		text-align: center;
	}
	.fun .item image{
		width: 48rpx;
		height: 48rpx;
		vertical-align: middle;
		margin-right: 15rpx;
		position: relative;
		top: -2rpx;
	}
	.fun .item:first-child{
		border-right: 1px solid #E5E5E5;
	}
	.detail{
		background-color: #FFFFFF;
		margin-top: 20rpx;
		padding: 26rpx;
	}
	.detail .title{
		text-align: center;
		font-size: 24rpx;
	}
	.detail .code{
		width: 320rpx;
		height: 320rpx;
		margin: 40rpx auto;
		position: relative;
	}
	.detail .code>image{
		display: block;
		width: 100%;
		height: 100%;
	}
	.detail .code .mask{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #FFFFFF;
		opacity: 0.8;
		text-align: center;
		color: #111111;
		font-size: 32rpx;
	}
	.detail .code .mask image{
		width: 48rpx;
		height: 48rpx;
		display: block;
		margin: 0 auto;
		margin-top: 110rpx;
		margin-bottom: 15rpx;
	}
	.detail .box{
		background-color: #FAFAFA;
		width: 698rpx;
		border-radius: 24rpx;
		margin: 0 auto;
		padding: 26rpx;
		font-size: 24rpx;
		line-height: 50rpx;
	}
	.detail .box text{
		display: inline-block;
		width: 160rpx;
	}
	.btn {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
		color: #FFFFFF;
		background-color: #FE0520;
		border-radius: 40rpx;
		width: 640rpx;
		margin: 30rpx auto;
	}
</style>
